<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 表头 -->
        <div class="card-container">
          <div class="header_left breadcrumb">
            <a-breadcrumb>
              <a-breadcrumb-item>
                <div class="icon_box" style="float: left;">
                  <i class="iconfont icon-31shouyexuanzhong"></i>
                </div>
                <div style="float: left; line-height: 30px;"> &nbsp; &nbsp; &nbsp;ESG数聚宝(ESG Databot)/
                </div>
                <div style="float: left; line-height: 30px;"><a href="">ESG数据透视</a></div>
              </a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <div>
            <a-tabs v-model="activeKey" type="card">
              <!-- 任务传送、数据填报、进度检查、催删改 -->
              <!-- 数据透视 -->
              <a-tab-pane key="1" tab="数据透视">
                <PivotLeft></PivotLeft>
              </a-tab-pane>
              <!-- ESG评估透视 -->
              <a-tab-pane key="2" tab="ESG评估透视">
                <PivotCenter></PivotCenter>
              </a-tab-pane>
              <!-- ESG预评分 -->
              <a-tab-pane key="3" tab="ESG预评分">
                <PivotRight></PivotRight>
              </a-tab-pane>

            </a-tabs>
          </div>

        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>

import PivotLeft from './PivotLeft'
import PivotCenter from './PivotCenter'
import PivotRight from './PivotRight'

export default {
  data() {
    return {
      activeKey: '1',

      height: '300px',
      width: '100%',
      data: [{
        value: 160,
        name: '资产一'
      },
      {
        value: 80,
        name: '资产二'
      },
      {
        value: 40,
        name: '资产三'
      }
      ],
      tabPosition: 'GRI'
    }
  },
  components: {
    PivotLeft,
    PivotCenter,
    PivotRight
  },
  computed: {},
  methods: {

  }
}
</script>
<style>
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  font-size: 14px !important;

  background: #eee !important;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  font-weight: 900;
  font-size: 15px !important;
  background: #fff !important;
}


.card-container p {
  margin: 0;
}

.card-container>.ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container>.ant-tabs-card .ant-tabs-content>.ant-tabs-tabpane {
  padding: 16px;
  background: #fff;
}

.card-container>.ant-tabs-card>.ant-tabs-nav::before {
  display: none;
}

.card-container>.ant-tabs-card .ant-tabs-tab,
[data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-tab {
  background: transparent;
  border-color: transparent;
}

.card-container>.ant-tabs-card .ant-tabs-tab-active,
[data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-tab-active {
  background: #fff;
  border-color: #fff;
}

#components-tabs-demo-card-top .code-box-demo {
  padding: 24px;
  overflow: hidden;
  background: #f5f5f5;
}

[data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -8px;
}

[data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-tab {
  background: transparent;
  border-color: transparent;
}

[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
  background: #000;
}

[data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-content>.ant-tabs-tabpane {
  background: #141414;
}

[data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-tab-active {
  background: #141414;
  border-color: #141414;
}
</style>
<style scoped lang="scss">
@import '@/assets/css/listcommon.scss';

/* @import '~@assets/less/common.less'; */
/** Button按钮间距 */
.icon_box {
  width: 30px;
  height: 30px;
  background: #4bc076;
  border-radius: 5px;
  color: #fff;
  line-height: 30px;

  i {
    color: #fff;
    font-size: 16px;
  }
}

.ant-btn,
.action-btn {
  margin-left: 8px;

  &:first-child {
    margin-left: 0;
  }
}

::v-deep .ant-table .ant-table-body .ant-table-thead .ant-table-selection-column {
  text-align: center !important;
}

::v-deep .ant-table-thead>tr>th .anticon-filter,
.ant-table-thead>tr>th .ant-table-filter-icon {
  left: 60px !important;
}

.breadcrumb {
  padding: 10px 15px;
  border: 1px solid #eee;
  margin-bottom: 15px;
  _background: #f5f5f5;
  background: url(../../../assets/img/banner1.0.png);
  background-position: top center;
  background-size: cover;
}

.table-page-search-submitButtons .ant-btn {
  border: 1px solid rgb(209, 208, 208) !important;
}

.table-page-search-submitButtons .ant-btn-primary {
  color: #fff !important;
  background: #1890ff !important;
}

::v-deep .ant-spin-container .ant-pagination.mini .ant-pagination-total-text {
  position: absolute;
  left: 0;
}

.table-page-search-wrapper {
  margin-top: 15px;

  .header_right {
    justify-content: flex-start;
  }
}
</style>
